<template>
  <div class="box">
    <p-modal
      title="新增"
      :visible="skillVisible"
      :confirm-loading="skillConfirmLoading"
      @ok="addLabel"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-form-model-item ref="name" label="产品编码" prop="mcode">
          <p-input disabled :value="form.mcode"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="产品名称" prop="mname">
          <p-input disabled :value="form.mname"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="产品描述" prop="mexplain">
          <p-input disabled :value="form.mexplain"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="labelTemplateName" label="标签模板编码" prop="labelTemplateName">
          <p-select
            show-search
            placeholder="选择标签模板编码"
            option-filter-prop="children"
            style="width: 350px"
            v-model="form.labelTemplateName"
            :filter-option="filterOption"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
          >
            <p-select-option
              :value="item.labelTemplateName"
              v-for="(item, index) in mesBcTemplateList"
              :key="index"
            >{{ item.labelTemplateNo + " " + item.labelTemplateName}}</p-select-option>
          </p-select>
        </p-form-model-item>




        <p-form-model-item ref="name" label="打印份数" prop="prtintQty">
          <p-input-number id="inputNumber" v-model="form.prtintQty" :min="1" />          
        </p-form-model-item>

      </p-form-model>
    </p-modal>
  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction } from "@/api/manage";

export default {
  props: {
    mainId: {
      type: String,
    },
  }, 

  data() {
    return {
      skillVisible: false,
      skillConfirmLoading: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        mcode: "",
        mname: "",
        mexplain: "",
        labelTemplateName: "",
        prtintQty: "",
      },
      rules: {
        labelTemplateName: [
          { required: true, message: "标签模板编码", trigger: "blur" },
        ],
        mcode: [
          { required: true, message: "产品编码", trigger: "blur" },
        ],
        prtintQty: [
          { required: true, message: "打印份数", trigger: "blur" },
        ],
      },
      mesBcTemplateList: [],
      url: {
        info: "/mes-code/mesBcProductLabel",
        add: "/mes-code/mesBcProductList",
        mesBcTemplateList: "/mes-code/mesBcTemplate/all", // 标签信息列表
      },
    };
  },

  watch: {
    mainId(newVal, oldVal) {
      this.getInfo();
    },
  },

  mounted() {
    this.getInfo();
    this.getMesBcTemplateList();
  },
  methods: {
    addLabel() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let lableInfo;
          this.mesBcTemplateList.forEach((ele) => {
            if (ele.labelTemplateName == this.form.labelTemplateName) {
              lableInfo = ele;
            }
          });

          const params = {
            mesProductLabelId: this.mainId,
            mcode: this.form.mcode,
            labelTemplateId: lableInfo.id,
            prtintQty: this.form.prtintQty,
            ...lableInfo,
          };

          postAction(this.url.add, params).then((res) => {
            if (res.success) {
              this.$emit("ok");
              this.skillConfirmLoading = false;
              this.skillVisible = false;
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    getMesBcTemplateList() {
      const parmas = {
        pageSize: 1000,
      };
      getAction(this.url.mesBcTemplateList, parmas).then((res) => {
        if (res.success) {
          this.mesBcTemplateList = res.data;
          this.prtintQty = res.prtintQty;
        }
      });
    },

    getInfo() {
      getAction(this.url.info + "/" + this.mainId).then((res) => {
        if (res.success) {
          this.form = res.data;
        }
      });
    },

    showModal(record) {
      if (record) {
        console.log('record', record);
        this.labelTemplateName = record.labelTemplateName
      }
      this.skillVisible = true;
    },
    handleCancel() {
      this.skillVisible = false;
    },
    comfirm() {
      console.log("ok");
    },

    showSubModal() {
      this.$refs.modalForm.showModal();
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },

    selectSkillOk(selectSkillArr) {
      this.selectSkillArr = selectSkillArr;
    },

    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
.skill-box {
  cursor: pointer;
  border: 1px solid #ddd;
  min-height: 40px;
}
</style>
